<template>
    <div class="user-box">
        <var-space direction="column" align="center"> 
            <var-avatar :src="avatarUrl" fit="contain" :class="{'avatar':true,'isNow':true||isNow}"/>
            <div>{{username}}</div>
        </var-space>
    </div>
    
</template>

<script setup>
import { computed } from 'vue';
import defaultAvatar from '@/assets/image/avatar.png';
const props = defineProps([
    'username',
    'avatar',
    'isNow'
])
const avatarUrl = computed(() => props.avatar || defaultAvatar)

</script>

<style scoped lang="less">
.user-box{
    width:100px;
    display:flex;
    justify-content:center;
    font-size: 13px;
    .avatar{
        border: 2px solid #5c3e07d0;
        &.isNow {
            @keyframes color-animate {
                from {
                    border-color: aquamarine;
                }

                to {
                    border-color: #5c3e07d0;
                }
            }
            animation: color-animate 3s infinite ease-in-out ;
        }
    }
}
</style>